<template>
  <div class="recommendAdvert">
    <section class="type0">
      <!-- 背景 -->
      <div class="men">
        <img
          draggable="false"
          v-if="datas.bakcgroundImg"
          :src="datas.bakcgroundImg"
          alt=""
        />
        <img draggable="false" v-else src="../../../../assets/images/gzbg1.png" alt="" />
      </div>

      <!-- 标题 -->
      <div class="subjectitle">
        <p>{{ datas.name }}</p>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: "recommendAdvert",
  props: {
    datas: Object,
  },
};
</script>
<style lang="scss" scoped>
.recommendAdvert {
  position: relative;

  /* 类型一 */
  .type0 {
    width: 100%;
    background-repeat: round;
    position: relative;
    height: 104px;
    margin-top:10px;
    /* 蒙版 */
    .men {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius:10px;
      }
    }

    /* 信息 */
    .subjectitle {
      height: 60px;
      position: absolute;
      left: 25px;
      top: 25px;
      z-index: 3;
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #fff;
        font-weight: 600;
        font-size:18px;
      }
    }
  }
}
</style>
